<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  height: 100vh;
			  background: #111;
			}
			
			.panel {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  position: relative;
			  width: 250px;
			  padding: 20px 0;
			  flex-wrap: wrap;
			  background: linear-gradient(black, #0c0c0c);
			  border: 3px solid black;
			  border-radius: 10px;
			  overflow: hidden;
			  list-style-type: none;
			}
			.panel::before {
			  position: absolute;
			  content: "";
			  bottom: -50%;
			  width: 100%;
			  height: 100%;
			  background: rgba(255, 255, 255, 0.05);
			  pointer-events: none;
			}
			.panel li {
			  margin: 15px;
			}
			.panel li .switch {
			  position: relative;
			  cursor: pointer;
			  -webkit-user-select: none;
			     -moz-user-select: none;
			      -ms-user-select: none;
			          user-select: none;
			}
			.panel li .switch input[type=radio] {
			  position: absolute;
			  -webkit-appearance: none;
			     -moz-appearance: none;
			          appearance: none;
			}
			.panel li .switch input[type=radio]:checked ~ .switch__number {
			  color: white;
			  text-shadow: 0 0 10px #2694e4, 0 0 10px #2694e4;
			  background: black;
			  border: 3px solid white;
			  box-shadow: 0 0 10px rgba(38, 148, 228, 0.5), 0 0 20px rgba(38, 148, 228, 0.5), 0 0 30px rgba(38, 148, 228, 0.5);
			}
			.panel li .switch .switch__number {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 60px;
			  height: 60px;
			  font-size: 30px;
			  color: #222;
			  background: #101010;
			  border: 3px solid black;
			  border-radius: 10px;
			  transition: 0.5s;
			}
		</style>
	</head>
	<body>
		<ul class="panel">
		  <li>
		    <label class="switch"
		      ><input type="radio" name="number" />
		      <div class="switch__number">1</div></label
		    >
		  </li>
		  <li>
		    <label class="switch"
		      ><input type="radio" name="number" />
		      <div class="switch__number">2</div></label
		    >
		  </li>
		  <li>
		    <label class="switch"
		      ><input type="radio" name="number" />
		      <div class="switch__number">3</div></label
		    >
		  </li>
		  <li>
		    <label class="switch"
		      ><input type="radio" name="number" />
		      <div class="switch__number">4</div></label
		    >
		  </li>
		  <li>
		    <label class="switch"
		      ><input type="radio" name="number" />
		      <div class="switch__number">5</div></label
		    >
		  </li>
		  <li>
		    <label class="switch"
		      ><input type="radio" name="number" />
		      <div class="switch__number">6</div></label
		    >
		  </li>
		</ul>

	</body>
</html>
